<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getOilList, geRecentDate } from '../api';
import Table from './Table.vue';

interface IOilItemModal {
    area: string;
    oilPrice92: string;
    oilPrice95: string;
    oilPrice98: string;
    oilPrice0: string;
    updateTime: string;
}

interface IOilresultModal {
    code: number;
    data: IOilItemModal[];
    msg: string;
}

interface IRecentOilDate {
    id: string;
    date: string;
    week: number
}

const list = ref<IOilItemModal[]>([]);
const loading = ref(false);
const tableColumns = ref<{
    value: string;
    label: string;
}[]>([{
    value: 'area',
    label: '地区'
}, {
    value: 'oilPrice92',
    label: '92'
}, {
    value: 'oilPrice95',
    label: '95'
}, {
    value: 'updateTime',
    label: '更新时间'
}])
const recentOilData = ref<IRecentOilDate | null>(null);

onMounted(() => {
    loading.value = true;
    getOilList().then((res: IOilresultModal) => {
        if (res.code === 1) {
            loading.value = false;
            list.value = res.data;
        }
    })
    geRecentDate().then(res => {
        if (res.code === 1) {
            recentOilData.value = res.data[0];
        }
    })
})


</script>

<template>
    <div class="oilPrice">
        <van-loading vertical v-if="loading" />
        <div v-else>
            <div style="padding: 0.5rem; font-size: 0.8rem; color: #666;">油价更新时间： {{ recentOilData?.date.split('T')[0] }}</div>
            <Table :data="list" :columns="tableColumns"></Table>
        </div>

    </div>
</template>

<style scoped>
.oilPrice {
    padding: 0 1rem 3.1rem 1rem;
}
</style>